const path = require('path'); //引入path
const glob = require('glob');
require("babel-polyfill");
//4.42.0 已经自行打包了，这里不是必须的，这篇的作者用的是3.8.1
// const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');

const extractTextPlugin = require("extract-text-webpack-plugin");

// var website = {
//     //这个可以是cdn上面的一个路径
//     publicPath: 'http://127.0.0.1:8080/'
// }

var website;
if (process.env.type == "build") {
    let host = 'cdn29.data304.com';
    website = {
        host: host,
        publicPath: 'http://' + host + '/'
    }
} else {
    let host = '192.168.1.6';
    website = {
        host: host,
        publicPath: 'http://' + host + ':8080/'
    }
}

//减少CSS冗余
const PruifyCSSPlugin = require('purifycss-webpack');
const entry = require('./webpack_config/entry_webpack.js');
const webpack = require('webpack');
//静态资源，会被直接拷贝，不会重命名
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {      //暴露出来
    // devtool: 'eval-source-map',
    entry: {
        entry: './src/school/entry.js'
    },   //入口文件配置

    output: {
        path: path.resolve(__dirname, 'dist'),//dist绝对路径
        // filename:'bundle.js'
        filename: '[name].js',//打包后的出口和入口文件名一模一样
        publicPath: website.publicPath
    },  //  出口文件配置 
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: "css-loader"
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1,//小于limit字节的图片都进行base64操作，否则会对图片进行md5的重命名
                        esModule: false
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
            {
                test: /\.less$/,
                // use: [{
                //     loader: "style-loader"
                // }, {
                //     loader: "css-loader"
                // }, {
                //     loader: "less-loader"
                // }]

                //less分离
                use: extractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'less-loader'
                    }],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.scss/,
                // use: [{
                //     loader: 'style-loader'
                // }, {
                //     loader: 'css-loader'
                // }, {
                //     loader: 'sass-loader'
                // }]

                //scss分离
                use: extractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'sass-loader'
                    }],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // "react", "es2015", "stage-3",
                            "es2015", "stage-0"
                        ],
                        "plugins": [
                            ["transform-runtime", {
                                "polyfill": false,
                                "regenerator": true
                            }]
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    },  //  模块，例如CSS,图片转换，压缩
    plugins: [
        // new uglify()
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/school/index.html'
        }),
        new extractTextPlugin('/css/index.css'),
        new PruifyCSSPlugin({
            paths: glob.sync(path.join(__dirname, 'src/*.html'))//src下所有的html
        }),
        //全局的引入jquery
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
        //这个会在js的第一行加上
        new webpack.BannerPlugin('gyh版权所有！'),

        //优化，4.x的webpack已经删除了这个方法
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: ['jquery', 'vue'],//对应入口文件的jquery(单独抽离)
        //     filename: 'assets/js/[name].js',//抽离到哪里
        //     minChunks: 2//抽离几个文件
        // }),
        new webpack.optimize.SplitChunksPlugin({
            cacheGroups: {
                default: {
                    minChunks: 2,// 最小 chunk ，默认1
                    priority: -20,// 缓存组优先级
                    reuseExistingChunk: true,// 可设置是否重用该chunk（查看源码没有发现默认值）
                },
                //打包重复出现的代码
                vendor: {
                    chunks: 'initial',// 必须三选一： "initial" | "all" | "async"(默认就是异步)
                    //模块最少被多少个入口文件依赖。当大于等于minChunks设定的值时，该模块就会被打包到公用包中。
                    //小于这个值时，该模块就会被和每个入口文件打包在一起。
                    //当忽略此属性时，只有在被所有入口文件都依赖时，才会提取相应模块。
                    minChunks: 2,
                    maxInitialRequests: 5, // 最大初始化请求数，默认1
                    minSize: 0, // 最小尺寸，默认0
                    name: 'vendor'//要缓存的 分隔出来的 chunk 名称  assets/js/vendor vendor
                },
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: Infinity //2 Infinity
                }
            }
        }),
        new webpack.optimize.RuntimeChunkPlugin({
            name: "manifest"
        }),

        new copyWebpackPlugin([{
            from: __dirname + '/src/public',//打包的静态资源目录地址
            to: './public' //打包到dist下面的public
        }]),

    ], //  插件,多个插件，所以是数组
    // optimization: {
    //     splitChunks: {
    //         cacheGroups: {
    //             commons: {
    //                 name: "commons",
    //                 chunks: "initial",
    //                 minChunks: 2
    //             }
    //         }
    //     }
    // },

    devServer: {
        contentBase: path.resolve(__dirname, './dist'),
        host: website.host, //'127.0.0.1',
        compress: true,
        port: 8080,
        hot: true
    }, //  配置webpack服务
    watchOptions: {
        poll: 1000,//监测修改的时间(ms)        
        aggregateTimeout: 500, //防止重复按键，500毫米内算按键一次
        ignored: /node_modules/,//不监测
    }
}